﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../../lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" />
    <script src="../../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script> 
    <script src="../../../lib/ligerUI/js/plugins/ligerDrag.js"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerDialog.js"></script>
    <style>
        .message {
            width: 99%;
            height: 100px;
            overflow:auto;
        }
        .l-dialog-win .l-dialog-content { 
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        var manager;

        var TreeDeptData = {
            Rows: [
            { id: '01',pid:null, name: "企划部", remark: "1989-01-12"},
            {id: '0101',pid:'01', name: "企划分部一", remark: "企划分部一"},
            {id: '0102', name: "企划分部二", remark: "企划分部二"},
            { id: '010201',pid:'0102', name: "企划分部二 A组", remark: "企划分部二 A组" },
            { id: '010202',pid:'0102', name: "企划分部二 B组", remark: "企划分部二 B组" }, 
            { id: '0103',pid:'01', name: "企划分部三", remark: "企划分部三" } , 
            { id: '02', pid: null, name: "研发部", remark: "研发部" },
            { id: '03', pid: null, name: "产品部", remark: "产品部" }
            ]
        };


        $(function ()
        {
            window.dialog = $.ligerDialog.open({
                isResize: true,
                isHidden: true,
                target: $("<div id='message' class='message'></div>"),
                buttons: [
                    { text: '关闭', onclick: function (i, d) { d.hide(); } }
                ]
            });
            dialog.hide();
            window.alert = function (message) {
                $("#message").html(message.toString());
                dialog.show();
            }

            manager = $("#maingrid").ligerGrid({
                columns: [
                { display: '部门名', name: 'name', id: 'deptName', width: 250, align: 'left' },
                { display: '部门名(重复显示)', name: 'name', id: 'deptName2', width: 250, align: 'left' },
                { display: '部门标示', name: 'id', id:'id1',width: 250, type: 'int', align: 'left' }, 
                { display: '部门描述', name: 'remark', width: 250, align: 'left' }
                ], width: '100%', pageSizeOptions: [5, 10, 15, 20], height: '97%',
                data: TreeDeptData, alternatingRow: false, tree: {
                    columnId: 'deptName',
                    //columnName: 'name',
                    idField: 'id',
                    parentIDField: 'pid'
                }
            }
            );
        });
       
        function getParent()
        {
            var row = manager.getParent(manager.getSelectedRow());
            alert(JSON.stringify(row));
        }
        function getSelected()
        {
            var row = manager.getSelectedRow();
            if (!row) { alert('请选择行'); return; }
            alert(JSON.stringify(row));
        }
        function getData()
        {
            var data = manager.getData();
            alert(JSON.stringify(data));
        }
        function hasChildren()
        {
            var row = manager.getSelectedRowObj();
            alert(manager.hasChildren(row));
        }
        function isLeaf()
        {
            var row = manager.getSelectedRowObj();
            alert(manager.isLeaf(row));
        }
        
    </script>
</head>
<body  style="padding:4px"> 
<div> 
       <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="getParent()">获取父节点</a>


     <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="hasChildren()">是否有子节点</a>
       
        <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="isLeaf()">是否叶节点节点</a>
          
   <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="getSelected()">获取选中的值(选择行)</a>
  
   <a class="l-button" style="width:120px;float:left; margin-left:10px;" onclick="getData()">获取当前的值</a>

   <div class="l-clear"></div>
 
</div>

    <div id="maingrid"></div> 
<div>


</div>

</body>
</html>
